<template>
  <div class="treeTools-container">
    <!-- ===={{ toolNode }} -->
    <el-row style="row-title">
      <!-- 左边 -->
      <el-col :span="20"
        >{{ toolNode.name }}

        <div class="grid-content bg-purple"></div
      ></el-col>
      <!-- 右边 -->
      <el-col :span="4">
        <el-row style="row-title">
          <el-col :span="12"
            >{{ toolNode.manager }}
            <div class="grid-content bg-purple"></div
          ></el-col>
          <el-col :span="12">
            <!-- <span>操作</span> -->
            <el-dropdown @command="handleCommand">
              <span>
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  command="add"
                  :disabled="!checkPermission('add-uid')"
                  >添加子部门</el-dropdown-item
                >
                <el-dropdown-item command="edit" v-if="isRoot"
                  >编辑部门
                </el-dropdown-item>
                <el-dropdown-item command="del" v-if="isRoot"
                  >删除部门</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>

    <!-- 编辑对话框 -->

    <!-- <dialog-tree-edit :dialogFormVisible="dialogFormVisible"></dialog-tree-edit> -->
  </div>
</template>

<script>
import { departmentDelApi } from "@/api/departments";
export default {
  data() {
    return {
      //dialogFormVisible: false
    };
  },
  name: "",
  props: {
    isRoot: {
      type: Boolean,
      default: true
    },
    toolNode: {
      type: [Object, Array]
    }
  },
  created() {
    //console.log(this.toolNode, 33333);
  },
  methods: {
    async handleCommand(command) {
      //console.log(command, 112222);
      // this.dialogFormVisible = true;
      if (command == "add") {
        //console.log(11111);
        //  添加部门
        this.$emit("addDig", this.toolNode);
      } else if (command == "edit") {
        //  设置父组件中的  对话框显示   子传父
        this.$emit("editDig", this.toolNode);
      } else {
        //  删除
        // this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning"
        // })
        //   .then(async () => {
        //     await departmentDelApi(this.toolNode.id);
        //     this.$emit("refreshTree");
        //     this.$message({
        //       type: "success",
        //       message: "删除成功!"
        //     });
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消删除"
        //     });
        //   });

        const res = await this.$confirm(
          "此操作将永久删除该文件, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).catch(err => err);
        console.log(res, 33344555);
        if (res == "confirm") {
          //点击的是确认
          await departmentDelApi(this.toolNode.id);
          this.$emit("refreshTree");
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.treeTools-container {
  width: 100%;
  .el-row {
    .el-col {
      height: 20px;
    }
  }
}
</style>
